<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <h1 id="one"></h1>
    <h1 id="two"></h1>
    <script>
      //   console.log(document.documentElement.clientWidth)
      //   // 在PC端,window.onresize监听视口的变化
      //   window.onresize = function () {
      //     console.log(document.documentElement.clientWidth)
      //   }

      // 移动端的缩放
      // 注意: 移动端缩放,布局视口不变,变化的是视觉视口
      // 如果在移动端使用window.onresize.则他监听的是布局视口的变化
      setInterval(() => {
        document.getElementById('one').innerText =
          `布局视口的宽度:` + document.documentElement.clientWidth

        document.getElementById('two').innerText =
          `视觉视口的宽度:` + window.innerWidth
      }, 50)
    </script>
  </body>
</html>
